<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二十四节气莲生长数据系统</title>
    <script src="./echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --spring: #7cb342;
            --summer: #e53935;
            --autumn: #fb8c00;
            --winter: #1e88e5;
            --spring-light: #c8e6c9;
            --summer-light: #ffcdd2;
            --autumn-light: #ffe0b2;
            --winter-light: #bbdefb;
            --text-primary: #2e3a4d;
            --text-secondary: #5a6872;
            --bg-color: #f5f7fa;
            --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg-color);
            color: var(--text-primary);
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .season-tabs {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .season-btn {
            padding: 12px 28px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        .season-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%, -50%);
            transform-origin: 50% 50%;
        }

        .season-btn:active::after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        .spring { background: var(--spring); }
        .summer { background: var(--summer); }
        .autumn { background: var(--autumn); }
        .winter { background: var(--winter); }

        .season-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
        }

        .season-btn.active {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            font-weight: 600;
        }

        .chart-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: var(--card-shadow);
            height: auto;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        .chart-wrapper {
            flex: 1;
            min-height: 350px;
            width: 100%;
        }

        .data-table-container {
            margin-top: 25px;
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            white-space: nowrap;
        }

        .data-table th, .data-table td {
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            text-align: center;
            transition: background 0.2s;
        }

        .data-table th {
            background: var(--spring);
            color: white;
            font-weight: 500;
            position: sticky;
            top: 0;
        }

        .data-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .data-table tr:hover td {
            background-color: #f0f0f0;
        }

        .agro-tip {
            margin-top: 20px;
            padding: 10px;
            background: #f0f7eb;
            border-radius: 8px;
            font-size: 13px;
            color: #2c5f2d;
            border-left: 4px solid var(--spring);
        }
         
        h1 {
            text-align: center;
            color: #2c5f2d;
            margin: 20px 0 30px;
            position: relative;
            font-weight: 600;
            font-size: 2.2rem;
        }

        h1::after {
            content: "";
            display: block;
            width: 120px;
            height: 4px;
            background: linear-gradient(to right, var(--spring), #2c5f2d, var(--spring));
            margin: 15px auto 0;
            border-radius: 2px;
        }

        .season-title {
            text-align: center;
            color: var(--text-primary);
            margin: 10px 0 25px;
            font-size: 1.5rem;
            font-weight: 500;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        .season-title::after {
            content: "";
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, transparent, currentColor, transparent);
        }

        .tooltip-custom {
            background: rgba(255, 255, 255, 0.95) !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
            border: none !important;
            padding: 12px 16px !important;
            color: var(--text-primary) !important;
        }

        .tooltip-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-primary);
            font-size: 15px;
        }

        .tooltip-item {
            display: flex;
            align-items: center;
            margin: 4px 0;
        }

        .tooltip-marker {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        @media (max-width: 768px) {
            .chart-group {
                grid-template-columns: 1fr;
            }
            
            .season-tabs {
                gap: 10px;
            }
            
            .season-btn {
                padding: 10px 18px;
                font-size: 14px;
            }

            h1 {
                font-size: 1.8rem;
                margin-bottom: 20px;
            }

            .season-title {
                font-size: 1.3rem;
            }

            .chart-container {
                padding: 15px;
                min-height: 450px;
            }

            .data-table th, .data-table td {
                padding: 10px 12px;
                font-size: 13px;
            }
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--spring);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 数据高亮样式 */
        .data-highlight {
            font-weight: 600;
            color: var(--spring);
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>莲生长周期节气数据可视化系统</h1>
        
        <div class="season-tabs">
            <button class="season-btn spring active" onclick="loadSeason('spring')">春季</button>
            <button class="season-btn summer" onclick="loadSeason('summer')">夏季</button>
            <button class="season-btn autumn" onclick="loadSeason('autumn')">秋季</button>
            <button class="season-btn winter" onclick="loadSeason('winter')">冬季</button>
        </div>

        <div id="seasonTitle" class="season-title">春季 - 莲的萌芽生长期</div>

        <div class="chart-group" id="chartContainer">
            <div class="loading">
                <div class="loading-spinner"></div>
            </div>
        </div>
    </div>

    <script>
        // 完整的24节气农业数据
        const seasonData = {
            spring: [
                { 
                    name: "立春", 
                    data: { 
                        waterTemp: 8.5, 
                        soilTemp: 5.2, 
                        germination: 35, 
                        leafArea: 2.1,
                        waterDepth: 20,
                        pH: 6.8,
                        sunshine: 4.2,
                        nutrientN: 15,
                        nutrientP: 8,
                        nutrientK: 12
                    },
                    agroAction: "清塘消毒，准备种植环境",
                    tip: "此时气温开始回升，但水温仍低，适合进行池塘清理和消毒工作。建议使用生石灰(50-75kg/亩)全池泼洒消毒，杀灭病原体。"
                },
                { 
                    name: "雨水",
                    data: { 
                        waterTemp: 10.2, 
                        soilTemp: 6.8, 
                        germination: 58, 
                        leafArea: 3.5,
                        waterDepth: 25,
                        pH: 6.9,
                        sunshine: 5.1,
                        nutrientN: 18,
                        nutrientP: 10,
                        nutrientK: 15
                    },
                    agroAction: "施底肥，准备种藕",
                    tip: "雨水增多，水温上升，适合施用有机底肥，为种藕做准备。每亩施用腐熟有机肥2000-3000kg，配合过磷酸钙20-30kg，均匀撒施后耕翻入土。"
                },
                { 
                    name: "惊蛰",
                    data: { 
                        waterTemp: 12.8, 
                        soilTemp: 9.5, 
                        germination: 75, 
                        leafArea: 5.2,
                        waterDepth: 30,
                        pH: 7.0,
                        sunshine: 5.8,
                        nutrientN: 22,
                        nutrientP: 12,
                        nutrientK: 18
                    },
                    agroAction: "开始种藕，浅水管理",
                    tip: "气温稳定在10℃以上，是种藕的最佳时期。选择健壮种藕(2-3节，带有顶芽)，按行距1.5-2m、株距0.8-1m定植，保持5-10cm浅水以利增温。"
                },
                { 
                    name: "春分",
                    data: { 
                        waterTemp: 15.5, 
                        soilTemp: 12.3, 
                        germination: 90, 
                        leafArea: 8.7,
                        waterDepth: 35,
                        pH: 7.1,
                        sunshine: 6.5,
                        nutrientN: 25,
                        nutrientP: 15,
                        nutrientK: 20
                    },
                    agroAction: "追肥，防治病虫害",
                    tip: "莲藕开始快速生长，需追施氮肥(尿素10-15kg/亩)。注意防治早期病虫害，如蚜虫可用10%吡虫啉1500倍液喷雾，叶斑病可用50%多菌灵800倍液防治。"
                },
                { 
                    name: "清明",
                    data: { 
                        waterTemp: 18.2, 
                        soilTemp: 15.0, 
                        germination: 95, 
                        leafArea: 12.3,
                        waterDepth: 40,
                        pH: 7.2,
                        sunshine: 7.2,
                        nutrientN: 28,
                        nutrientP: 18,
                        nutrientK: 22
                    },
                    agroAction: "水位调控，除草",
                    tip: "浮叶大量生长，需逐步加深水位至15-20cm。及时人工除草或使用选择性除草剂，保持水质清新，促进光合作用。"
                },
                { 
                    name: "谷雨",
                    data: { 
                        waterTemp: 20.5, 
                        soilTemp: 17.8, 
                        germination: 98, 
                        leafArea: 18.6,
                        waterDepth: 45,
                        pH: 7.3,
                        sunshine: 8.0,
                        nutrientN: 30,
                        nutrientP: 20,
                        nutrientK: 25
                    },
                    agroAction: "施壮苗肥，预防病害",
                    tip: "莲株进入旺盛生长期，需补充磷钾肥(复合肥15-20kg/亩)。预防叶腐病，可用50%甲基托布津1000倍液喷雾，同时注意防治斜纹夜蛾。"
                }
            ],
            summer: [
                {
                    name: "立夏",
                    data: { 
                        waterTemp: 22.8, 
                        soilTemp: 20.5, 
                        flowering: 28, 
                        leafArea: 25.4,
                        waterDepth: 50,
                        pH: 7.4,
                        sunshine: 8.5,
                        budCount: 3.2,
                        nutrientN: 32,
                        nutrientP: 22,
                        nutrientK: 28
                    },
                    agroAction: "水位管理，追施花肥",
                    tip: "立杆叶开始出现，保持水位20-30cm。追施花芽分化肥(磷酸二氢钾2-3kg/亩)，促进花芽形成。注意防治莲缢管蚜，可用10%啶虫脒2000倍液喷雾。"
                },
                {
                    name: "小满",
                    data: { 
                        waterTemp: 25.2, 
                        soilTemp: 22.8, 
                        flowering: 45, 
                        leafArea: 32.7,
                        waterDepth: 55,
                        pH: 7.5,
                        sunshine: 9.0,
                        budCount: 5.8,
                        nutrientN: 35,
                        nutrientP: 25,
                        nutrientK: 30
                    },
                    agroAction: "防治虫害，调节水质",
                    tip: "蚜虫、斜纹夜蛾易发期，可用4.5%高效氯氰菊酯1500倍液防治。每15-20天换水1/3，保持水质清新，透明度30-40cm为宜。"
                },
                {
                    name: "芒种",
                    data: { 
                        waterTemp: 28.5, 
                        soilTemp: 25.2, 
                        flowering: 68, 
                        leafArea: 42.3,
                        waterDepth: 60,
                        pH: 7.6,
                        sunshine: 9.5,
                        budCount: 8.5,
                        nutrientN: 38,
                        nutrientP: 28,
                        nutrientK: 32
                    },
                    agroAction: "盛花期管理，补钾肥",
                    tip: "进入盛花期，叶面喷施0.3%磷酸二氢钾溶液，每10天1次。及时摘除老叶、病叶，改善通风透光条件。注意防治腐败病，可用50%多菌灵800倍液灌根。"
                },
                {
                    name: "夏至",
                    data: { 
                        waterTemp: 30.2, 
                        soilTemp: 27.5, 
                        flowering: 85, 
                        leafArea: 48.6,
                        waterDepth: 65,
                        pH: 7.7,
                        sunshine: 10.0,
                        budCount: 12.3,
                        nutrientN: 40,
                        nutrientP: 30,
                        nutrientK: 35
                    },
                    agroAction: "高温管理，预防热害",
                    tip: "一年中水温最高时期，加深水位至40-50cm防热害。晴天中午可喷水降温，保持水体流动。每7-10天使用微生态制剂调节水质，预防蓝藻爆发。"
                },
                {
                    name: "小暑",
                    data: { 
                        waterTemp: 31.5, 
                        soilTemp: 28.8, 
                        flowering: 78, 
                        leafArea: 52.4,
                        waterDepth: 70,
                        pH: 7.8,
                        sunshine: 10.2,
                        budCount: 15.6,
                        nutrientN: 42,
                        nutrientP: 32,
                        nutrientK: 38
                    },
                    agroAction: "采收莲蓬，防治病害",
                    tip: "开始采收早期莲蓬，宜在清晨进行。注意防治腐败病和褐斑病，可用70%甲基托布津1000倍液+75%百菌清600倍液交替使用。保持水体溶解氧>5mg/L。"
                },
                {
                    name: "大暑",
                    data: { 
                        waterTemp: 32.0, 
                        soilTemp: 29.5, 
                        flowering: 65, 
                        leafArea: 55.2,
                        waterDepth: 75,
                        pH: 7.9,
                        sunshine: 10.5,
                        budCount: 18.2,
                        nutrientN: 45,
                        nutrientP: 35,
                        nutrientK: 40
                    },
                    agroAction: "大量采收，换水降温",
                    tip: "莲蓬盛采期，每2-3天采收一次。高温下每5-7天换水1/3，换水时温差不超过3℃。叶面喷施钙肥增强抗逆性，预防日灼病。"
                }
            ],
            autumn: [
                {
                    name: "立秋",
                    data: { 
                        waterTemp: 30.5, 
                        soilTemp: 28.2, 
                        flowering: 52, 
                        leafArea: 50.8,
                        waterDepth: 70,
                        pH: 7.8,
                        sunshine: 9.8,
                        budCount: 14.5,
                        seedSetting: 65,
                        nutrientN: 42,
                        nutrientP: 32,
                        nutrientK: 38
                    },
                    agroAction: "后期追肥，继续采收",
                    tip: "气温开始回落，追施一次壮籽肥(复合肥10kg/亩+硫酸钾5kg/亩)。继续采收莲蓬，同时注意留种，选择生长健壮、无病虫害的莲蓬留种。"
                },
                {
                    name: "处暑",
                    data: { 
                        waterTemp: 28.8, 
                        soilTemp: 26.5, 
                        flowering: 38, 
                        leafArea: 45.6,
                        waterDepth: 65,
                        pH: 7.7,
                        sunshine: 9.2,
                        budCount: 10.8,
                        seedSetting: 72,
                        nutrientN: 40,
                        nutrientP: 30,
                        nutrientK: 35
                    },
                    agroAction: "采收后期莲蓬，留种",
                    tip: "选择健壮植株留种，当莲蓬变褐、莲子与孔格分离时采收。种子晾晒至含水量12%以下储存。及时清除病残叶，减少病原越冬。"
                },
                {
                    name: "白露",
                    data: { 
                        waterTemp: 26.2, 
                        soilTemp: 24.8, 
                        flowering: 22, 
                        leafArea: 38.4,
                        waterDepth: 60,
                        pH: 7.6,
                        sunshine: 8.5,
                        budCount: 7.2,
                        seedSetting: 80,
                        nutrientN: 38,
                        nutrientP: 28,
                        nutrientK: 32
                    },
                    agroAction: "采藕准备，水位调节",
                    tip: "荷花逐渐凋谢，地下茎开始膨大。逐步降低水位至10-15cm，促进藕节充实。叶面喷施0.2%磷酸二氢钾+0.1%硼砂溶液，提高藕品质。"
                },
                {
                    name: "秋分",
                    data: { 
                        waterTemp: 23.5, 
                        soilTemp: 22.0, 
                        flowering: 10, 
                        leafArea: 30.2,
                        waterDepth: 55,
                        pH: 7.5,
                        sunshine: 7.8,
                        budCount: 3.5,
                        seedSetting: 85,
                        nutrientN: 35,
                        nutrientP: 25,
                        nutrientK: 30
                    },
                    agroAction: "开始采藕，留种管理",
                    tip: "藕开始成熟，可陆续采收。留种田保持20-30cm水深，种藕要求节间粗短、顶芽完整。采收前7-10天排干田水，便于采挖。"
                },
                {
                    name: "寒露",
                    data: { 
                        waterTemp: 20.2, 
                        soilTemp: 19.5, 
                        flowering: 2, 
                        leafArea: 22.6,
                        waterDepth: 50,
                        pH: 7.4,
                        sunshine: 7.0,
                        seedSetting: 90,
                        nutrientN: 32,
                        nutrientP: 22,
                        nutrientK: 28
                    },
                    agroAction: "大量采藕，清选种子",
                    tip: "进入采藕旺季，采挖时避免损伤藕身。清选种子，剔除破损、病虫粒，用50%多菌灵800倍液浸泡10分钟消毒，晾干后储存。"
                },
                {
                    name: "霜降",
                    data: { 
                        waterTemp: 16.8, 
                        soilTemp: 16.0, 
                        leafArea: 15.3,
                        waterDepth: 45,
                        pH: 7.3,
                        sunshine: 6.2,
                        seedSetting: 95,
                        nutrientN: 30,
                        nutrientP: 20,
                        nutrientK: 25
                    },
                    agroAction: "采藕结束，清理荷塘",
                    tip: "采藕工作基本结束，清除残枝败叶，每亩用生石灰50-75kg消毒。留种田保持10-15cm水深越冬，定期检查水位，防止干涸。"
                }
            ],
            winter: [
                {
                    name: "立冬",
                    data: { 
                        waterTemp: 12.5, 
                        soilTemp: 12.8, 
                        leafArea: 8.2,
                        waterDepth: 40,
                        pH: 7.2,
                        sunshine: 5.5,
                        nutrientN: 28,
                        nutrientP: 18,
                        nutrientK: 22
                    },
                    agroAction: "留种藕管理，防冻",
                    tip: "保持留种田20-30cm水深，防止种藕受冻。北方地区可在冰层上覆盖稻草等保温材料。定期检查种藕储存情况，防止霉烂。"
                },
                {
                    name: "小雪",
                    data: { 
                        waterTemp: 8.8, 
                        soilTemp: 9.5, 
                        leafArea: 3.5,
                        waterDepth: 50,
                        pH: 7.1,
                        sunshine: 4.8,
                        nutrientN: 25,
                        nutrientP: 15,
                        nutrientK: 20
                    },
                    agroAction: "加深水位，保温",
                    tip: "进一步加深水位至40-50cm，利用水层保温防冻。池塘四周可设置防风屏障。储存的种藕定期检查，保持湿润但不过湿。"
                },
                {
                    name: "大雪",
                    data: { 
                        waterTemp: 5.2, 
                        soilTemp: 6.8, 
                        leafArea: 1.2,
                        waterDepth: 60,
                        pH: 7.0,
                        sunshine: 4.2,
                        nutrientN: 22,
                        nutrientP: 12,
                        nutrientK: 18
                    },
                    agroAction: "越冬管理，巡查",
                    tip: "定期巡查池塘，防止水位过低导致种藕受冻。冰封池塘需破冰增氧，每3-5亩设一个通气孔。仓库储存的种藕保持5-10℃。"
                },
                {
                    name: "冬至",
                    data: { 
                        waterTemp: 3.5, 
                        soilTemp: 5.2, 
                        waterDepth: 70,
                        pH: 6.9,
                        sunshine: 4.0,
                        nutrientN: 20,
                        nutrientP: 10,
                        nutrientK: 15
                    },
                    agroAction: "保持深水，防寒",
                    tip: "一年中最冷时期，确保50-80cm水深保护种藕安全越冬。冰层过厚时需破冰，防止缺氧。检查储存种藕，剔除腐烂个体。"
                },
                {
                    name: "小寒",
                    data: { 
                        waterTemp: 2.8, 
                        soilTemp: 4.5, 
                        waterDepth: 75,
                        pH: 6.8,
                        sunshine: 4.2,
                        nutrientN: 18,
                        nutrientP: 8,
                        nutrientK: 12
                    },
                    agroAction: "冰层管理，补氧",
                    tip: "如水面结冰，需破冰补氧(每2-3亩设1个通气孔)。仓库储存的种藕保持湿度70-80%，定期翻动检查。准备春季种植计划。"
                },
                {
                    name: "大寒",
                    data: { 
                        waterTemp: 2.5, 
                        soilTemp: 4.0, 
                        waterDepth: 80,
                        pH: 6.8,
                        sunshine: 4.5,
                        nutrientN: 15,
                        nutrientP: 5,
                        nutrientK: 10
                    },
                    agroAction: "准备春季工作",
                    tip: "严寒即将过去，开始准备春季清塘和种植计划。检修工具设备，采购肥料农药。储存的种藕每15天检查一次，保持适宜温湿度。"
                }
            ]
        };

        // 季节标题描述
        const seasonTitles = {
            spring: "春季 - 莲的萌芽生长期 (立春至谷雨)",
            summer: "夏季 - 莲的旺盛开花期 (立夏至大暑)",
            autumn: "秋季 - 莲的结实采藕期 (立秋至霜降)",
            winter: "冬季 - 莲的休眠越冬期 (立冬至大寒)"
        };

        // 季节描述文本
        const seasonDescriptions = {
            spring: "春季是莲的萌芽生长阶段，从立春开始，随着气温回升，莲藕开始发芽生长。此阶段管理重点是清塘消毒、适时种植和早期肥水管理，为全年生长打下基础。",
            summer: "夏季是莲的旺盛生长期和开花期，从立夏到大暑，莲叶迅速扩展，大量开花结实。此阶段需加强水位管理、病虫害防治和营养供应，确保高产优质。",
            autumn: "秋季是莲的结实和采藕期，从立秋到霜降，荷花逐渐凋谢，地下茎膨大成熟。此阶段重点是籽莲采收、藕田管理和留种工作，同时做好采藕准备。",
            winter: "冬季是莲的休眠越冬期，从立冬到大寒，地上部分枯死，地下茎进入休眠。此阶段主要工作是种藕越冬管理、池塘维护和来年生产准备。"
        };

        // 加载季节数据
        function loadSeason(season) {
            // 更新活跃按钮样式
            document.querySelectorAll('.season-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`.${season}`).classList.add('active');
            
            // 更新季节标题
            const seasonTitleEl = document.getElementById('seasonTitle');
            seasonTitleEl.textContent = seasonTitles[season];
            seasonTitleEl.style.color = getSeasonColor(season);
            
            const container = document.getElementById('chartContainer');
            container.innerHTML = `
                <div class="chart-container" style="grid-column: 1/-1; text-align: center; padding: 20px;">
                    <h3 style="color: ${getSeasonColor(season)}; margin-bottom: 10px;">${seasonTitles[season]}</h3>
                    <p style="color: var(--text-secondary); max-width: 800px; margin: 0 auto;">${seasonDescriptions[season]}</p>
                </div>
            `;
            
            const data = seasonData[season];
            
            // 创建温度变化曲线图
            createLineChart(container, {
                title: '水温与泥温变化趋势',
                data: data,
                series: [
                    {
                        name: '水温(℃)',
                        field: 'waterTemp',
                        color: '#1e88e5',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: { width: 4 },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(30, 136, 229, 0.3)' },
                                { offset: 1, color: 'rgba(30, 136, 229, 0.1)' }
                            ])
                        }
                    },
                    {
                        name: '泥温(℃)',
                        field: 'soilTemp',
                        color: '#8d6e63',
                        type: 'line',
                        smooth: true,
                        symbol: 'diamond',
                        symbolSize: 8,
                        lineStyle: { width: 4 }
                    }
                ],
                yAxisName: '温度(℃)',
                season: season
            });
            
            // 创建生长指标柱状图
            if (season === 'spring') {
                createBarChart(container, {
                    title: '萌芽期生长指标',
                    data: data,
                    series: [
                        {
                            name: '发芽率(%)',
                            field: 'germination',
                            color: '#7cb342'
                        },
                        {
                            name: '叶面积(dm²)',
                            field: 'leafArea',
                            color: '#689f38'
                        }
                    ],
                    yAxisName: '数值',
                    season: season
                });
                
                // 营养元素雷达图
                createRadarChart(container, {
                    title: '土壤营养元素变化',
                    data: data,
                    indicators: [
                        { name: '立春', max: 50 },
                        { name: '雨水', max: 50 },
                        { name: '惊蛰', max: 50 },
                        { name: '春分', max: 50 },
                        { name: '清明', max: 50 },
                        { name: '谷雨', max: 50 }
                    ],
                    seriesData: [
                        {
                            name: '氮(N)',
                            data: data.map(item => item.data.nutrientN),
                            color: '#7cb342'
                        },
                        {
                            name: '磷(P)',
                            data: data.map(item => item.data.nutrientP),
                            color: '#1e88e5'
                        },
                        {
                            name: '钾(K)',
                            data: data.map(item => item.data.nutrientK),
                            color: '#fb8c00'
                        }
                    ],
                    season: season
                });
            }
            
            if (season === 'summer') {
                // 夏季开花数据饼图
                createPieChart(container, {
                    title: '开花情况分布',
                    data: data,
                    field: 'flowering',
                    name: '开花率(%)',
                    radius: ['40%', '70%'],
                    season: season
                });
                
                // 花蕾数量折线图
                createLineChart(container, {
                    title: '花蕾数量变化',
                    data: data,
                    series: [
                        {
                            name: '花蕾数(个/株)',
                            field: 'budCount',
                            color: '#e53935',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 8,
                            lineStyle: { width: 4 },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(229, 57, 53, 0.3)' },
                                    { offset: 1, color: 'rgba(229, 57, 53, 0.1)' }
                                ])
                            }
                        }
                    ],
                    yAxisName: '花蕾数(个/株)',
                    season: season
                });
                
                // 日照时数柱状图
                createBarChart(container, {
                    title: '日照时数变化',
                    data: data,
                    series: [
                        {
                            name: '日照(小时)',
                            field: 'sunshine',
                            color: '#ffb300'
                        }
                    ],
                    yAxisName: '日照时数(小时)',
                    season: season
                });
            }
            
            if (season === 'autumn') {
                // 秋季结实率面积图
                createAreaChart(container, {
                    title: '结实率变化趋势',
                    data: data,
                    field: 'seedSetting',
                    name: '结实率(%)',
                    color: '#fb8c00',
                    season: season
                });
                
                // 多指标对比柱状图
                createMultiBarChart(container, {
                    title: '秋季生长指标对比',
                    data: data,
                    series: [
                        {
                            name: '叶面积(dm²)',
                            field: 'leafArea',
                            color: '#7cb342'
                        },
                        {
                            name: '开花率(%)',
                            field: 'flowering',
                            color: '#e53935'
                        },
                        {
                            name: '结实率(%)',
                            field: 'seedSetting',
                            color: '#fb8c00'
                        }
                    ],
                    yAxisName: '数值',
                    season: season
                });
                
                // 水位变化折线图
                createLineChart(container, {
                    title: '水位管理变化',
                    data: data,
                    series: [
                        {
                            name: '水位(cm)',
                            field: 'waterDepth',
                            color: '#1e88e5',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 8,
                            lineStyle: { width: 4 }
                        }
                    ],
                    yAxisName: '水位(cm)',
                    season: season
                });
            }
            
            if (season === 'winter') {
                // 冬季环境指标仪表盘
                createGaugeChart(container, {
                    title: '冬季平均水温',
                    data: data,
                    field: 'waterTemp',
                    name: '水温(℃)',
                    min: 0,
                    max: 15,
                    color: '#1e88e5',
                    season: season
                });
                
                // 水位变化折线图
                createLineChart(container, {
                    title: '冬季水位管理',
                    data: data,
                    series: [
                        {
                            name: '水位(cm)',
                            field: 'waterDepth',
                            color: '#1e88e5',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 8,
                            lineStyle: { width: 4 },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(30, 136, 229, 0.3)' },
                                    { offset: 1, color: 'rgba(30, 136, 229, 0.1)' }
                                ])
                            }
                        }
                    ],
                    yAxisName: '水位(cm)',
                    season: season
                });
                
                // 日照时数柱状图
                createBarChart(container, {
                    title: '冬季日照时数',
                    data: data,
                    series: [
                        {
                            name: '日照(小时)',
                            field: 'sunshine',
                            color: '#ffb300'
                        }
                    ],
                    yAxisName: '日照时数(小时)',
                    season: season
                });
            }
            
            // 创建数据表格
            createDataTable(container, season, data);
        }
        
        // 创建折线图
        function createLineChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container compact-chart';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(params) {
                let tooltip = `<div class="tooltip-custom"><div class="tooltip-title">${params[0].name}</div>`;
                
                params.forEach(item => {
                    tooltip += `
                        <div class="tooltip-item">
                            <span class="tooltip-marker" style="background:${item.color}"></span>
                            ${item.seriesName}: <span class="data-highlight">${item.value}${item.seriesName.includes('温度') ? '℃' : item.seriesName.includes('水位') ? 'cm' : ''}</span>
                        </div>
                    `;
                });
                
                // 添加农事操作提示
                const solarTerm = seasonData[config.season].find(term => term.name === params[0].name);
                if (solarTerm) {
                    tooltip += `<div style="margin-top:8px;color:${getSeasonColor(config.season)};font-weight:500;">农事: ${solarTerm.agroAction}</div>`;
                }
                
                tooltip += `</div>`;
                return tooltip;
            };
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: config.series.map(s => s.name),
                    top: 40,
                    itemWidth: 20,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: config.data.map(item => item.name),
                    axisLabel: {
                        rotate: 30,
                        interval: 0,
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    name: config.yAxisName,
                    nameLocation: 'middle',
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 12,
                        padding: [0, 0, 10, 0]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f0f0f0'
                        }
                    }
                },
                series: config.series.map(s => ({
                    name: s.name,
                    type: s.type || 'line',
                    smooth: s.smooth,
                    data: config.data.map(item => item.data[s.field]),
                    itemStyle: {
                        color: s.color
                    },
                    symbol: s.symbol || 'circle',
                    symbolSize: s.symbolSize || 8,
                    lineStyle: s.lineStyle || {
                        width: 3
                    },
                    areaStyle: s.areaStyle,
                    emphasis: {
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    }
                }))
            };
            
            chart.setOption(option);
            
            // 响应式调整
            window.addEventListener('resize', function() {
                chart.resize();
            });
            
            // 图表点击事件
            chart.on('click', function(params) {
                console.log('点击了图表数据:', params);
            });
        }
        
        // 创建柱状图
        function createBarChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(params) {
                let tooltip = `<div class="tooltip-custom"><div class="tooltip-title">${params[0].name}</div>`;
                
                params.forEach(item => {
                    tooltip += `
                        <div class="tooltip-item">
                            <span class="tooltip-marker" style="background:${item.color}"></span>
                            ${item.seriesName}: <span class="data-highlight">${item.value}${config.yAxisName.includes('率') ? '%' : ''}</span>
                        </div>
                    `;
                });
                
                // 添加农事操作提示
                const solarTerm = seasonData[config.season].find(term => term.name === params[0].name);
                if (solarTerm) {
                    tooltip += `<div style="margin-top:8px;color:${getSeasonColor(config.season)};font-weight:500;">农事: ${solarTerm.agroAction}</div>`;
                }
                
                tooltip += `</div>`;
                return tooltip;
            };
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: config.series.map(s => s.name),
                    top: 40,
                    itemWidth: 20,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: config.data.map(item => item.name),
                    axisLabel: {
                        rotate: 30,
                        interval: 0,
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    name: config.yAxisName,
                    nameLocation: 'middle',
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 12,
                        padding: [0, 0, 10, 0]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f0f0f0'
                        }
                    }
                },
                series: config.series.map(s => ({
                    name: s.name,
                    type: 'bar',
                    barWidth: '40%',
                    data: config.data.map(item => item.data[s.field]),
                    itemStyle: {
                        color: s.color,
                        borderRadius: [4, 4, 0, 0]
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 12,
                        formatter: function(params) {
                            return params.value.toFixed(params.value > 100 ? 0 : 1);
                        }
                    }
                }))
            };
            
            chart.setOption(option);
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 创建多系列柱状图
        function createMultiBarChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(params) {
                let tooltip = `<div class="tooltip-custom"><div class="tooltip-title">${params[0].name}</div>`;
                
                params.forEach(item => {
                    tooltip += `
                        <div class="tooltip-item">
                            <span class="tooltip-marker" style="background:${item.color}"></span>
                            ${item.seriesName}: <span class="data-highlight">${item.value}${config.yAxisName.includes('率') ? '%' : ''}</span>
                        </div>
                    `;
                });
                
                // 添加农事操作提示
                const solarTerm = seasonData[config.season].find(term => term.name === params[0].name);
                if (solarTerm) {
                    tooltip += `<div style="margin-top:8px;color:${getSeasonColor(config.season)};font-weight:500;">农事: ${solarTerm.agroAction}</div>`;
                }
                
                tooltip += `</div>`;
                return tooltip;
            };
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: config.series.map(s => s.name),
                    top: 40,
                    itemWidth: 20,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: config.data.map(item => item.name),
                    axisLabel: {
                        rotate: 30,
                        interval: 0,
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    name: config.yAxisName,
                    nameLocation: 'middle',
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 12,
                        padding: [0, 0, 10, 0]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f0f0f0'
                        }
                    }
                },
                series: config.series.map((s, i) => ({
                    name: s.name,
                    type: 'bar',
                    barGap: 0,
                    barWidth: '25%',
                    barCategoryGap: '20%',
                    data: config.data.map(item => item.data[s.field]),
                    itemStyle: {
                        color: s.color,
                        borderRadius: [4, 4, 0, 0]
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 12,
                        formatter: function(params) {
                            return params.value.toFixed(params.value > 100 ? 0 : 1);
                        }
                    }
                }))
            };
            
            chart.setOption(option);
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 创建饼图
        function createPieChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(params) {
                const solarTerm = seasonData[config.season].find(term => term.name === params.name);
                return `
                    <div class="tooltip-custom">
                        <div class="tooltip-title">${params.name}</div>
                        <div class="tooltip-item">
                            <span class="tooltip-marker" style="background:${params.color}"></span>
                            ${config.name}: <span class="data-highlight">${params.value}%</span> (${params.percent}%)
                        </div>
                        <div style="margin-top:8px;color:${getSeasonColor(config.season)};font-weight:500;">
                            农事: ${solarTerm.agroAction}
                        </div>
                    </div>
                `;
            };
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: config.data.map(item => item.name),
                    textStyle: {
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: config.name,
                        type: 'pie',
                        radius: config.radius || ['50%', '70%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 6,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}: {d}%',
                            fontSize: 12
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 14,
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: config.data.map(item => ({
                            value: item.data[config.field],
                            name: item.name,
                            itemStyle: {
                                color: getSeasonColor(item.name)
                            }
                        }))
                    }
                ]
            };
            
            chart.setOption(option);
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 创建雷达图
        function createRadarChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    className: 'tooltip-custom',
                    formatter: function(params) {
                        const solarTerm = seasonData[config.season][params.dataIndex];
                        return `
                            <div class="tooltip-custom">
                                <div class="tooltip-title">${params.name}</div>
                                <div class="tooltip-item">
                                    <span class="tooltip-marker" style="background:${params.color}"></span>
                                    ${params.seriesName}: <span class="data-highlight">${params.value}</span>
                                </div>
                                <div style="margin-top:8px;color:${getSeasonColor(config.season)};font-weight:500;">
                                    农事: ${solarTerm.agroAction}
                                </div>
                            </div>
                        `;
                    }
                },
                legend: {
                    data: config.seriesData.map(s => s.name),
                    top: 40,
                    textStyle: {
                        fontSize: 12
                    }
                },
                radar: {
                    indicator: config.indicators,
                    radius: '65%',
                    axisName: {
                        color: '#666',
                        fontSize: 12
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(255, 255, 255, 0.7)']
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    }
                },
                series: [{
                    type: 'radar',
                    emphasis: {
                        lineStyle: {
                            width: 4
                        }
                    },
                    data: config.seriesData.map(s => ({
                        value: s.data,
                        name: s.name,
                        areaStyle: {
                            color: s.color ? echarts.color.hexToRgba(s.color, 0.4) : undefined
                        },
                        lineStyle: {
                            width: 2,
                            color: s.color
                        },
                        symbolSize: 6,
                        itemStyle: {
                            color: s.color
                        }
                    }))
                }]
            };
            
            chart.setOption(option);
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 创建面积图
        function createAreaChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(params) {
                const solarTerm = seasonData[config.season].find(term => term.name === params[0].name);
                return `
                    <div class="tooltip-custom">
                        <div class="tooltip-title">${params[0].name}</div>
                        <div class="tooltip-item">
                            <span class="tooltip-marker" style="background:${params[0].color}"></span>
                            ${config.name}: <span class="data-highlight">${params[0].value}%</span>
                        </div>
                        <div style="margin-top:8px;color:${getSeasonColor(config.season)};font-weight:500;">
                            农事: ${solarTerm.agroAction}
                        </div>
                    </div>
                `;
            };
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: config.data.map(item => item.name),
                    axisLabel: {
                        rotate: 30,
                        interval: 0,
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: config.name,
                    nameLocation: 'middle',
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 12,
                        padding: [0, 0, 10, 0]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f0f0f0'
                        }
                    }
                },
                series: [
                    {
                        name: config.name,
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 4,
                            color: config.color
                        },
                        showSymbol: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: config.color },
                                { offset: 1, color: 'rgba(255, 255, 255, 0)' }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: config.data.map(item => item.data[config.field]),
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%',
                            fontSize: 12
                        }
                    }
                ]
            };
            
            chart.setOption(option);
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 创建仪表盘图
        function createGaugeChart(container, config) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 计算平均值
            const values = config.data.map(item => item.data[config.field]);
            const avgValue = (values.reduce((a, b) => a + b, 0) / values.length).toFixed(1);
            
            const option = {
                title: {
                    text: config.title,
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: getSeasonColor(config.season),
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}',
                    className: 'tooltip-custom'
                },
                series: [
                    {
                        name: config.name,
                        type: 'gauge',
                        min: config.min,
                        max: config.max,
                        axisLine: {
                            lineStyle: {
                                width: 25,
                                color: [
                                    [0.3, '#67e0e3'],
                                    [0.7, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -25,
                            length: 8,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -25,
                            length: 25,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        axisLabel: {
                            color: 'auto',
                            distance: 35,
                            fontSize: 12
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}℃',
                            color: 'auto',
                            fontSize: 28,
                            fontWeight: 'bold',
                            offsetCenter: [0, '60%']
                        },
                        title: {
                            offsetCenter: [0, '80%'],
                            fontSize: 14,
                            color: getSeasonColor(config.season)
                        },
                        data: [
                            {
                                value: avgValue,
                                name: '平均温度'
                            }
                        ]
                    }
                ]
            };
            
            chart.setOption(option);
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 创建数据表格
        function createDataTable(container, season, data) {
            const tableDom = document.createElement('div');
            tableDom.className = 'chart-container';
            tableDom.style.gridColumn = '1 / -1';
            container.appendChild(tableDom);
           
            // 根据季节确定要显示的字段
            let fields = [];
            let headers = ['节气', '农事操作'];
            let units = ['', ''];

            if (season === 'spring') {
                fields = ['waterTemp', 'soilTemp', 'germination', 'leafArea', 'waterDepth', 'pH', 'sunshine'];
                headers = headers.concat(['水温', '泥温', '发芽率', '叶面积', '水位', 'pH值', '日照']);
                units = units.concat(['℃', '℃', '%', 'dm²', 'cm', '', '小时']);
            } else if (season === 'summer') {
                fields = ['waterTemp', 'soilTemp', 'flowering', 'leafArea', 'budCount', 'waterDepth', 'pH', 'sunshine'];
                headers = headers.concat(['水温', '泥温', '开花率', '叶面积', '花蕾数', '水位', 'pH值', '日照']);
                units = units.concat(['℃', '℃', '%', 'dm²', '个/株', 'cm', '', '小时']);
            } else if (season === 'autumn') {
                fields = ['waterTemp', 'soilTemp', 'flowering', 'leafArea', 'seedSetting', 'waterDepth'];
                headers = headers.concat(['水温', '泥温', '开花率', '叶面积', '结实率', '水位']);
                units = units.concat(['℃', '℃', '%', 'dm²', '%', 'cm']);
            } else if (season === 'winter') {
                fields = ['waterTemp', 'soilTemp', 'waterDepth', 'pH', 'sunshine'];
                headers = headers.concat(['水温', '泥温', '水位', 'pH值', '日照']);
                units = units.concat(['℃', '℃', 'cm', '', '小时']);
            }
            
            // 添加表头单位
            headers = headers.map((h, i) => h + (units[i] ? `(${units[i]})` : ''));
            
            const tableHTML = `
                <h3 style="text-align:center;color:${getSeasonColor(season)};margin:10px 0 15px;">${seasonTitles[season]} - 详细数据表</h3>
                <div class="data-table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                ${headers.map(h => `<th>${h}</th>`).join('')}
                            </tr>
                        </thead>
                        <tbody>
                            ${data.map(item => `
                                <tr>
                                    <td style="font-weight:500;color:${getSeasonColor(season)}">${item.name}</td>
                                    <td>${item.agroAction}</td>
                                    ${fields.map(f => `
                                        <td>
                                            ${item.data[f] !== undefined ? 
                                                `<span style="font-weight:500;">${item.data[f]}</span>` : 
                                                '-'}
                                        </td>
                                    `).join('')}
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
                <div class="agro-tip">
                    <strong>${data[0].name}农事提示：</strong>${data[0].tip}
                </div>
            `;
            
            tableDom.innerHTML = tableHTML;
        }
        
        // 根据季节名称获取颜色
        function getSeasonColor(seasonOrTerm) {
            if (seasonOrTerm === 'spring' || ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨'].includes(seasonOrTerm)) {
                return '#7cb342';
            } else if (seasonOrTerm === 'summer' || ['立夏', '小满', '芒种', '夏至', '小暑', '大暑'].includes(seasonOrTerm)) {
                return '#e53935';
            } else if (seasonOrTerm === 'autumn' || ['立秋', '处暑', '白露', '秋分', '寒露', '霜降'].includes(seasonOrTerm)) {
                return '#fb8c00';
            } else {
                return '#1e88e5'; // 冬季
            }
        }
        
        // 默认加载春季数据
        loadSeason('spring');
    </script>
</body>
</html>